<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>户籍管理系统</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- <script src="./"></script> -->
    <style>
        .container {
            margin: 1rem 1rem;

        }

        h2 {
            margin-left: 3rem;
        }

        h5 {
            margin-top: 1rem;
        }
    </style>
</head>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

<body>
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
        <div class="container-fluid">
            <a class="navbar-brand">
                <h2>户籍管理系统</h2>
            </a>

            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-primary" type="submit">搜索</button>
            </form>

        </div>
    </nav>

    <div class="row">
        <div class="col-2">

            <div class="list-group" id="list-tab" role="tablist">

                <!-- <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list"
                    href="#" role="tab">系统用户管理</a>

                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list"
                    href="#" role="tab">户籍信息添加<div></div> </a>

                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list"
                    href="./guan_li.html" role="tab">户籍信息管理<div></div> </a>

                <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list"
                    href="#" role="tab">个人户籍查看</a>

                <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list"
                    href="#" role="tab"">户籍系统管理</a> -->

                    <a href="./guan_li.html">户籍信息管理</a>
            </div>

        </div>

        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

        <div class=" col-9">
                    <div class="tab-content" id="nav-tabContent">


                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->


                        <div class="tab-pane fade" id="list-tianjia" role="tabpanel">
                            <h5>户籍信息添加</h5>
                            <div class="row g-3">
                                <!-- <div class="col-md-6">
                            <label for="inputEmail4" class="form-label">Email</label>
                            <input type="email" class="form-control" id="inputEmail4">
                        </div>
                        <div class="col-md-6">
                            <label for="inputPassword4" class="form-label">Password</label>
                            <input type="password" class="form-control" id="inputPassword4">
                        </div> -->
                                <div class="col-3">
                                    <label for="inputAddress" class="form-label">姓名：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入姓名" value>
                                </div>
                                <div class="col-md-2">
                                    <label for="inputState" class="form-label">性别：</label>
                                    <select id="inputAddress" class="form-select">
                                        <option selected>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <label for="inputAddress" class="form-label">民族：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="汉">
                                </div>
                                <div class="col-5">
                                    <label for="inputAddress" class="form-label">身份证号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入身份证号">
                                </div>
                                <div class="col-4">
                                    <label for="inputAddress" class="form-label">学号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入学号">
                                </div>
                                <div class="col-4">
                                    <label for="inputAddress" class="form-label">手机号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入手机号">
                                </div>
                                <div class="col-4">
                                    <label for="inputAddress" class="form-label">QQ号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入QQ号">
                                </div>
                                <div class="col-6">
                                    <label for="inputAddress" class="form-label">学院：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入所在院系">
                                </div>
                                <div class="col-6">
                                    <label for="inputAddress" class="form-label">班级：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入班级">
                                </div>
                                <div class="col-12">
                                    <label for="inputAddress2" class="form-label">家庭住址：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入家庭住址">
                                </div>
                                <!-- <div class="col-md-6">
                            <label for="inputCity" class="form-label">City</label>
                            <input type="text" class="form-control" id="inputCity">
                        </div>
                        -->
                                <!-- <div class="col-md-2">
                            <label for="inputZip" class="form-label">Zip</label>
                            <input type="text" class="form-control" id="inputZip">
                        </div> -->
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="gridCheck">
                                        <label class="form-check-label" for="gridCheck">
                                            确定信息无误
                                        </label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary">添加</button>
                                </div>
                            </div>
                        </div>

                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->



                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                      
                    </div>
            </div>
        </div>
    </div>


    <script>
        const btn = document.querySelector('.btn-primary')
        const inputAll = document.querySelectorAll('#inputAddress')



        // console.log('fadfadsfasfafasasfadfas=',document.querySelectorAll('#inputAddress')[0]);

        const xhr = new XMLHttpRequest()



        const dataArr = []
        btn.onclick = function (ev) {


            // inputAll.forEach(item=>{
            //     // console.log(item.value);
            //     dataArr.push(item.value)

            // })

            // console.log('dataArr=',dataArr);



            xhr.open('post', 'http://localhost:2021/api/tian_jia',
                true);


            xhr.onload = function () {

                const data = JSON.parse(xhr.responseText);
                if (data.code === 200) {
                    alert('添加成功！');
                } else {
                    alert("添加失败")
                }
            }
            // 设置json请求头
            xhr.setRequestHeader('Content-Type',
                'application/json')

            xhr.send(JSON.stringify({
                name: inputAll[0].value,
                gender: inputAll[1].value,
                nation: inputAll[2].value,
                id_number: inputAll[3].value,
                Student_number: inputAll[4].value,
                cell_phone_number: inputAll[5].value,
                QQ_number: inputAll[6].value,
                college: inputAll[7].value,
                class1: inputAll[8].value,
                Home_address: inputAll[9].value,
                
            }))

            //阻止浏览器默认行为
            // ev.preventDefault();

            // ------------------------------------------------------------------------------------------------------------------




        }
    </script>

</body>

</html>